<template>
  <div v-if="shipmentType === 'one_shipping' || shipmentType === 'middle'">
    <el-button size="small" type="primary" @click="dialog = true;">批量填写</el-button>
    <el-dialog
      title="批量填写"
      :visible.sync="dialog"
      width="550px"
    >
      <div class="dialog-header">
        <div class="left">
          先导出商品表格，完善需发货的商品信息和数量后再上传
        </div>
        <div class="right">
          <el-button type="primary" :loading="downLoading" @click="downloadExcel">{{ $t('stock.下载商品表格') }}</el-button>
        </div>
      </div>
      <div style="text-align: center">
        <el-upload
          v-loading="uploadLoading"
          class="upload-demo"
          drag
          :action="uploadUrl"
          :on-success="uploadFileSuccess"
          :before-upload="beforeUpload"
          :show-file-list="false"
          name="file"
          :multiple="false"
          :headers="uploadHeader"
          accept=".csv,.xlsx,.xls"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">{{$t('stock.将Excel表格拖到此处或点击上传')}}</div>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import {getWarehouseGoodsList} from "@/api/shipment";

export default {
  name: 'ExportGoodsData',
  props:{
    shipmentType: {
      required: true,
    }
  },
  data(){
    return {
      uploadDialog: false,
      uploadUrl: `${process.env.VUE_APP_BASE_API }/excel/analyzeShipmentExcel`,
      uploadHeader: {
        Authorization: 'Bearer ' + getToken(),
      },
      dialog: false,
      downLoading: false,
      uploadLoading: false,
    }
  },
  methods: {
    downloadExcel(){
      const params = {
        shipmentType: this.shipmentType,
        export: 1,
      }
      this.downLoading = true;
      this.$successMessage('正在导出...')
      getWarehouseGoodsList(params)
        .then(res=>{
          this.downLoading = false;
          if(res.error === 0){
            window.open(res.data.excelPath,"_blank");
          }else{
            this.$errorMessage('导出失败');
          }
        })
    },
    beforeUpload(file){
      this.uploadLoading = true;
      this.$successMessage('文件上传解析中，请稍后')
    },
    uploadFileSuccess(res, file){
      this.uploadLoading = false
      this.dialog = false
      if (res.error === 0) {
        const {data} = res
        if(data.errorData.length === 0 && data.successData.length === 0){
          this.$errorMessage('文件解析失败')
        }else if(data.errorData.length > 0){
          let message = "";
          data.errorData.forEach(msg=>{
            message += "<p>"+ msg +"</p>";
          })
          this.$message({
            dangerouslyUseHTMLString: true,
            message: message
          });
        }else{
          this.$successMessage('文件解析成功')
          this.$emit('uploadsGoodsExcelSuccess', data.successData)
        }
      } else {
        this.$errorMessage(res.message);
      }
    }
  }
}

</script>

<style scoped lang="scss">
.dialog-header{
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  .left{
    line-height: 30px;
  }
  .right{
    margin-left: 30px;
  }
}
</style>
